<template>
  <div v-loading="roomLoading" :fullscreen="true">
    <el-select size="small" class="roomhosp_select" filterable v-model="hospCode" @change="hospChange" placeholder="请选择">
      <el-option
        v-for="(item,index) in mx_hospitalList"
        :key="index"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
    <el-cascader
      v-if="cascaderFlag"
      ref="roomCascader"
      style="width: 320px;"
      :options="propsTree"
      v-model="deptRoom"
      placeholder="院区/部门/设备类型/机房"
      @change="roomChange"
    >
      <template slot-scope="{ node, data }">
        <span>{{data.label}}</span>
        <span v-if="!node.isLeaf"> ({{data.children.length}}) </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
import {
  getDefaultCheckRoomArr,
  getCheckroomGroupListTree
} from '@/api/room'
import { setLocalStorageKey } from '@/utils/auth'
export default {
  props: {
    room: {
      type: Array,
      default: []
    },
    refreshLocal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roomLoading: false,
      isNewRoom: false,
      cascaderFlag: true,
      cNode: null,
      hospCode: this.$store.state.user.hospitalCode || '',
      deptRoom: [],
      propsTree: [],
      selectedRoom: []
    }
  },
  computed: {
    calRoom: {
      get() {
        return this.room
      },
      set(val) {
        this.$emit('update:room', val)
      }
    }
  },
  created() {
    this.$getHospitalList()
    this.getDefaultRoom()
  },
  mounted() {
  },
  methods: {
    async refresh(room) {
      this.init()
      if (room && room.length === 5) {
        // this.hospCode = room[0]
        if (this.propsTree.length === 0) {
          const roomTree = await getCheckroomGroupListTree(this.hospCode)
          this.propsTree = roomTree
        }
        const _r = [...room]
        console.log('roomCascaderBase=>_r', _r)
        this.setCascaderDefault(_r)
      }
    },
    init(hospcode) {
      this.hospCode = ''
      if (hospcode) {
        this.hospCode = hospcode
      }
      this.cascaderFlag = false
      this.propsTree = []
      this.selectedRoom = []
      this.deptRoom = []
      this.calRoom = []
      this.$nextTick(() => {
        this.cascaderFlag = true
      })
    },

    async hospChange(val) {
      this.init(val)
      this.isNewRoom = true
      this.roomLoading = true
      await this.getDefaultRoom()
      this.roomLoading = false
    },
    roomChange(data) {
      this.selectedRoom = []
      if (data.length > 0) {
        this.selectedRoom.push(this.hospCode)
        this.selectedRoom = this.selectedRoom.concat(data)
        const _roomAndHospCode = JSON.parse(JSON.stringify(this.selectedRoom))
        this.calRoom = [..._roomAndHospCode]
        if (this.refreshLocal) {
          this.$store.dispatch('user/resetDefaultCheckRoom', _roomAndHospCode)
        }
        this.$emit('roomChange', _roomAndHospCode)
      } else {
        this.$refs.roomCascader.$refs.panel.clearCheckedNodes()
        this.deptRoom = []
        this.calRoom = []
      }
    },

    // 设置默认数据
    getDefaultRoom() {
      return new Promise(async resolve => {
        if (this.deptRoom.length === 0) {
          // console.log('机房选择组件，设置模板机房')
          let { room, roomTree } = await getDefaultCheckRoomArr(this.hospCode, this.isNewRoom)
          const _room = room ? JSON.parse(JSON.stringify([...room])) : []
          this.setCascaderDefault(_room)
          this.propsTree = roomTree
          if (this.refreshLocal) {
            setLocalStorageKey('roomTree', JSON.stringify(roomTree))
          }
          this.isNewRoom = false
        }
        resolve()
      })
    },
    // 设置机房联级选择
    setCascaderDefault(room) {
      console.log('setCascaderDefault=>room', room)
      this.calRoom = [...room]
      if (this.refreshLocal) {
        this.$store.dispatch('user/resetDefaultCheckRoom', room)
      }
      this.hospCode = room.length > 0 ? room[0] : this.hospCode
      this.$emit('roomChange', room)
      this.cascaderFlag = false
      const _r = [...room]
      if (_r.length > 0) {
        _r.shift()
      }
      console.log('setCascaderDefault:===', _r)
      this.deptRoom = _r
      this.$nextTick(() => {
        this.cascaderFlag = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.roomhosp_select{
  vertical-align: top;
}
</style>
